<template>
	<view class="outbox">
		<!-- 背景图 -->
		<view class="ornament">
			<image class="ornamentback" src="../../static/timebeijing.svg"></image>
			<image class="ornamentmain" src="../../static/zhuangshi.svg"></image>
		</view>
		<!-- 查看方式 -->
		<view class="selectWay">
			<!-- 自定义日期查询，一次得在一个月内 -->
			<view class="selectWayItem" @click="changeWay(1)">
				选定查看
				<view class="selectWayItemBar1" :class="`selectWayItemBar${state.selectWayId}`">
					<view class="bar"></view>
				</view>
			</view>
			<!-- 按月查询 -->
			<view class="selectWayItem" @click="changeWay(2)">
				按月查看
			</view>
			<!-- 按年查询 -->
			<view class="selectWayItem" @click="changeWay(3)">
				按年查看
			</view>
		</view>
		<!-- 日历 -->
		<view v-if="state.selectWayId == 1" class="cardone">
			<!-- 年份月份选定 -->
			<view class="timeSelect">
				<view class="icon" @click="nextMonth(-1)">
					<image src="../../static/rili/zuojiantou.svg"></image>
				</view>
				<view class="mid">{{state.date[0]}}年{{state.date[1]}}月</view>
				<view class="icon" @click="nextMonth(1)">
					<image src="../../static/rili/youjiantou.svg"></image>
				</view>
			</view>
			<!-- 日期获取 -->
			<view class="dateGrid">
				<view class="dateGrid-item" :class="index > 4 ?'xiucolor':''" v-for="(item,index) in state.week" :key="item">
					{{item}}
				</view>
				<view class="dateGrid-item" v-for="(item,index) in state.blockNumber" :key="item">
					{{item}}
				</view>
				<view class="dateGrid-item" v-for="(item,index) in state.monthNumber" @click="selectBg(item)" :class="addbgg(item)" :key="item">
					<view>
						{{item}}
					</view>
					<view v-if="state.startTime === item" style="font-size: 20rpx;">
						开始
					</view>
					<view v-if="state.endTime === item" style="font-size: 20rpx;">
						结束
					</view>
				</view>
			</view>
		</view>
		<!-- 月份 -->
		<view v-if="state.selectWayId == 2" class="cardone">
			<!-- 年份年份选定 -->
			<view class="timeSelect">
				<view class="icon" @click="nextYear(-1)">
					<image src="../../static/rili/zuojiantou.svg"></image>
				</view>
				<view class="mid">{{state.date[0]}}年</view>
				<view class="icon" @click="nextYear(1)">
					<image src="../../static/rili/youjiantou.svg"></image>
				</view>
			</view>
			<!-- 日期获取 -->
			<view class="monthGrid">
				<view class="monthGrid-item" @click="selectMonthBg(item)" :class="state.monthBgId === item ?'monthBg':''" v-for="item in state.month" :key="item">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 年份 -->
		<view v-if="state.selectWayId == 3" class="cardone">
			<!-- 年份批次年份选定 -->
			<view class="timeSelect">
				<view class="icon" @click="nextSome(-1)">
					<image src="../../static/rili/zuojiantou.svg"></image>
				</view>
				<view class="mid">{{state.date[0]-11}}~{{state.date[0]}}年</view>
				<view class="icon" @click="nextSome(1)">
					<image src="../../static/rili/youjiantou.svg"></image>
				</view>
			</view>
			<!-- 日期获取 -->
			<view class="monthGrid">
				<view class="monthGrid-item" @click="selectYearBg(item)" :class="state.YearBgId === item ?'monthBg':''" v-for="item in state.year" :key="item">
					{{item}}年
				</view>
			</view>
		</view>
		<!-- 确认提交 -->
		<view class="submit">
			<u-button @click="submit" type="primary" text="确定选择日期"></u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		defineEmits
	} from "vue";
	const emits = defineEmits(['getDate'])
	const state = reactive({
		show: true,
		mode: 'range',
		selectWayId: 1,
		date: [],
		week:['一','二','三','四','五','六','日'],
		month:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
		year:[],
		blockNumber:[],
		monthNumber:[],
		startTime:0,
		endTime:0,
		monthBgId:0,
		YearBgId:0
	})
	onMounted(() => {
		getDate()
	})
	// 获取日期
	const getDate = (e) => {
		let date = e || new Date();
		let year = date.getFullYear()
		let month = date.getMonth() + 1;
		state.date = [year,month]
		let sweek = new Date(year,month-1,1).getDay()
		let num = getDays(year,month-1)
		let arr = [];
		for(let i=0;i<sweek-1;i++){
			arr.push('');
		}
		state.blockNumber = arr
		let arr1 = [];
		for(let i=1;i<=num;i++){
			arr1.push(i);
		}
		state.monthNumber = arr1
		let arr2 = []
		for(let i=0;i<12;i++){
			arr2.unshift(state.date[0]-i);
		}
		state.year = arr2
	}
	// 返回该月有多少天
	const getDays = (year, month) => {
		let days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
		if ((year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0)) {
			days[1] = 29
		}
		return days[month]
	}
	// 改变查询方式
	const changeWay = (id) => {
		state.selectWayId = id
		state.startTime = 0;
		state.endTime = 0
		getDate()
	}
	// 切换月份
	const nextMonth = (num)=>{
		if(num == -1){	
			if(state.date[1] == 1){
				let time = new Date(state.date[0]-1,11,1)
				getDate(time)
			}else{
				let time = new Date(state.date[0],state.date[1]-2,1)
				getDate(time)
			}
		}else{
			if(state.date[1] == 12){
				let time = new Date(state.date[0]+1,0,1)
				getDate(time)
			}else{
				let time = new Date(state.date[0],state.date[1],1)
				getDate(time)
			}
		}
		state.startTime = 0;
		state.endTime = 0
	}
	// 切换年份
	const nextYear = (num)=>{
		if(num == -1){	
			let time = new Date(state.date[0]-1,0,1)
			getDate(time)
		}else{
			let time = new Date(state.date[0]+1,0,1)
			getDate(time)
		}
		state.monthBgId = 0
	}
	// 切换年份批次
	const nextSome = (num) =>{
		if(num == -1){
			let time = new Date(state.date[0]-12,0,1)
			getDate(time)
		}else{
			let time = new Date(state.date[0]+12,0,1)
			getDate(time)
		}
		state.YearBgId = 0
	}
	// 自由选定时间选中时间加背景
	const selectBg = (item)=>{
		if(state.startTime === 0 && state.endTime === 0){
			state.startTime = item;
		}else if(state.startTime !== 0 && state.endTime === 0){
			if(item<=state.startTime){
				state.startTime = item
			}else{
				state.endTime = item
			}
		}else if(state.startTime !== 0 &&state.endTime !== 0){
			state.endTime = 0;
			state.startTime = item;
		}
	}
	// 增加颜色
	const addbgg = (item)=>{
		if(state.startTime ===item || state.endTime === item){
			return 'bg'
		}else if(state.startTime !== 0 && state.endTime !== 0 && item<=state.endTime && item>=state.startTime){
			return 'bg'
		}
	}
	// 选中月份加背景
	const selectMonthBg = (item)=>{
		state.monthBgId = item
	}
	// 选中年份加背景
	const selectYearBg = (item) =>{
		state.YearBgId = item
	}
	// 提交表单
	const submit = () =>{
		if(state.selectWayId === 1){
			let arr = [state.date[0],state.date[1],state.startTime,state.endTime]
			emits('getDate',arr)
		}else if(state.selectWayId === 2){
			let arr = [state.date[0],parseInt(state.monthBgId[0]),1,getDays(state.date[0],parseInt(state.monthBgId[0])-1)]
			emits('getDate',arr)
		}else if(state.selectWayId === 3){
			let arr = [state.YearBgId]
			emits('getDate',arr)
		}
		state.date = []
		state.year = []
		state.blockNumber=[]
		state.monthNumber=[]
		state.startTime=0
		state.endTime=0
		state.monthBgId=0
		state.YearBgId=0
		getDate()
	}
</script>

<style lang="less" scoped>
	.outbox {
		width: 100%;
		height: 100%;
		padding-top: 30rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
		position: relative;

		.ornament {
			width: 340rpx;
			height: 340rpx;
			position: absolute;
			top: -300rpx;
			right: 2%;

			.ornamentback {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 340rpx;
				height: 340rpx;
			}

			.ornamentmain {
				position: absolute;
				left: 20rpx;
				bottom: 0;
				width: 300rpx;
				height: 300rpx;
			}
		}

		.selectWay {
			width: 100%;
			height: 100rpx;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;

			.selectWayItem {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
				position: relative;

				.selectWayItemBar1 {
					transition: all 0.3s;
					width: 100%;
					height: 100rpx;
					position: absolute;
					left: 0;
					bottom: 0;
					display: flex;
					align-items: flex-end;
					justify-content: center;

					.bar {
						width: 60%;
						height: 4rpx;
						background-color: aqua;
						border-radius: 2rpx;
					}
				}

				.selectWayItemBar2 {
					transition: all 0.3s;
					transform: translateX(100%);
				}

				.selectWayItemBar3 {
					transition: all 0.3s;
					transform: translateX(200%);
				}
			}
		}

		.cardone {
			margin-top: 16rpx;
			// height: 450rpx;
			width: 100%;
			padding: 0rpx 12rpx 0rpx 12rpx;
			box-sizing: border-box;

			.timeSelect {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.icon {
					image {
						width: 46rpx;
						height: 46rpx;
					}
				}

				.mid {}
			}
			.dateGrid{
				margin-top: 14rpx;
				width: 100%;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
				.dateGrid-item{
					height: 70rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 10rpx;
				}
				.xiucolor{
					color: orangered;
				}
				.bg{
					background-color: palevioletred;
					border-radius: 4rpx;
				}
			}
			.monthGrid{
				margin-top: 14rpx;
				width: 100%;
				display: grid;
				grid-template-columns: 1fr 1fr 1fr;
				.monthGrid-item{
					height: 90rpx;
					margin-top: 20rpx;
					margin-bottom: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.monthBg{
					background-color: palevioletred;
					border-radius: 6rpx;
				}
			}
		}
		.submit{
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
